<template>
  <el-dialog :title="dialog.title" v-model="dialog.visible" width="80%" height="80%" draggable>
    <div>
      <el-card shadow="never">
        <listView :list="sum" />
        <el-table v-loading="loading" :data="advertiserEverydayCostList">
          <el-table-column label="时间" fixed prop="thatdayHoursDate" minWidth="160"></el-table-column>
          <el-table-column label="账户消耗" prop="cost">
            <template #default="{ row }">
              {{ formatPrice(row.cost) }}
            </template>
          </el-table-column>
          <el-table-column label="总充值/回本率" minWidth="150">
            <template #default="{ row }">
              <div>
                <span style="color: var(--el-color-primary)">
                  {{ formatPrice(row.iaaRegisterDividendAmount) }}
                </span>
                <span style="padding: 0 6px">/</span>
                <span class="text-[#ff0000]">
                  {{ row.cost * 1 !== 0 ? `${formatPrice((row.iaaRegisterDividendAmount / (row.cost / 1.015)) * 100)}%` : '0.00%' }}
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="T+0 总充值/回本率" minWidth="150">
            <template #default="{ row }">
              <div v-if="(row.thatdayHoursTimestamp + 60 * 60 * 0) * 1000 <= currTime">
                <span style="color: var(--el-color-primary)">
                  {{ formatPrice(row.dividendAmountHoursCurrent) }}
                </span>
                <span style="padding: 0 6px">/</span>
                <span class="text-[#ff0000]">
                  {{ row.cost * 1 !== 0 ? `${formatPrice((row.dividendAmountHoursCurrent / (row.cost / 1.015)) * 100)}%` : '0.00%' }}
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="T+1 总充值/回本率" minWidth="150">
            <template #default="{ row }">
              <div v-if="(row.thatdayHoursTimestamp + 60 * 60 * 1) * 1000 <= currTime">
                <span style="color: var(--el-color-primary)">
                  {{ formatPrice(row.dividendAmountHoursOne) }}
                </span>
                <span style="padding: 0 6px">/</span>
                <span class="text-[#ff0000]">
                  {{ row.cost * 1 !== 0 ? `${formatPrice((row.dividendAmountHoursOne / (row.cost / 1.015)) * 100)}%` : '0.00%' }}
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="T+2 总充值/回本率" minWidth="150">
            <template #default="{ row }">
              <div v-if="(row.thatdayHoursTimestamp + 60 * 60 * 2) * 1000 <= currTime">
                <span style="color: var(--el-color-primary)">
                  {{ formatPrice(row.dividendAmountHoursTwo) }}
                </span>
                <span style="padding: 0 6px">/</span>
                <span class="text-[#ff0000]">
                  {{ row.cost * 1 !== 0 ? `${formatPrice((row.dividendAmountHoursTwo / (row.cost / 1.015)) * 100)}%` : '0.00%' }}
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="T+3 总充值/回本率" minWidth="150">
            <template #default="{ row }">
              <div v-if="(row.thatdayHoursTimestamp + 60 * 60 * 3) * 1000 <= currTime">
                <span style="color: var(--el-color-primary)">
                  {{ formatPrice(row.dividendAmountHoursThree) }}
                </span>
                <span style="padding: 0 6px">/</span>
                <span class="text-[#ff0000]">
                  {{ row.cost * 1 !== 0 ? `${formatPrice((row.dividendAmountHoursThree / (row.cost / 1.015)) * 100)}%` : '0.00%' }}
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="T+4 总充值/回本率" minWidth="150">
            <template #default="{ row }">
              <div v-if="(row.thatdayHoursTimestamp + 60 * 60 * 4) * 1000 <= currTime">
                <span style="color: var(--el-color-primary)">
                  {{ formatPrice(row.dividendAmountHoursFour) }}
                </span>
                <span style="padding: 0 6px">/</span>
                <span class="text-[#ff0000]">
                  {{ row.cost * 1 !== 0 ? `${formatPrice((row.dividendAmountHoursFour / (row.cost / 1.015)) * 100)}%` : '0.00%' }}
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="T+n 总充值/回本率" minWidth="150">
            <template #default="{ row }">
              <div v-if="(row.thatdayHoursTimestamp + 60 * 60 * 5) * 1000 <= currTime">
                <span style="color: var(--el-color-primary)">
                  {{ formatPrice(row.dividendAmountHoursFive) }}
                </span>
                <span style="padding: 0 6px">/</span>
                <span class="text-[#ff0000]">
                  {{ row.cost * 1 !== 0 ? `${formatPrice((row.dividendAmountHoursFive / (row.cost / 1.015)) * 100)}%` : '0.00%' }}
                </span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { getHoursBlockPayAmount } from '@/api/oce/advertiserEverydayCost';
import { AdvertiserEverydayCostVO } from '@/api/oce/advertiserEverydayCost/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import { formatPrice } from '@/utils';

const advertiserEverydayCostList = ref<AdvertiserEverydayCostVO[]>([]);
const loading = ref(true);
const total = ref(0);

const sum = ref([]);

const dialog = reactive<DialogOption>({
  visible: false,
  title: '趋势图'
});

const queryParams = ref({
  referralLinkId: undefined,
  thatdayTimestamp: undefined
});
const currTime = ref(Date.now());

/** 时段充值趋势图  -- 列表中数据 */
const getList = async () => {
  loading.value = true;
  const res = await getHoursBlockPayAmount(queryParams.value);
  advertiserEverydayCostList.value = res.rows;
  sum.value = res.sum;
  loading.value = false;
};
const show = (data) => {
  console.log('去视图');
  dialog.visible = true;
  queryParams.value = data;
  getList();
};

defineExpose({ show });
</script>
